<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-25 22:19:50
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-04 16:23:01
 * @FilePath: /nhw/src/views/Work/EquipmentRepair/index.vue
-->
<template>
  <div class="EquipmentRepair">
    <NavBar
      fixed
      placeholder
      title="设备报修"
      z-index="999"
      @click-right="onClickRight"
      ref="nav"
    >
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.push('/home')"
        />
      </template>
      <template #right>
        <Icon
          name="notes-o"
          size="0.53rem"
          color="#000"
          @click="toRecordsList"
        />
      </template>
    </NavBar>
    <div class="main">
      <Field
        v-model="name"
        label="设备名称"
        placeholder="请扫描识别二维码"
        input-align="right"
        readonly
        required
        @click="toScan"
      >
        <template #right-icon>
          <Icon name="scan" class="search-icon" />
        </template>
      </Field>

      <Field
        v-model="describe"
        label="所在位置"
        placeholder=""
        input-align="right"
        readonly
      ></Field>
      <Field
        v-model="title"
        label="标题"
        required
        placeholder="请输入标题"
        input-align="right"
      ></Field>
      <Field
        v-model="lv"
        label="紧急程度"
        placeholder="请选择紧急程度"
        input-align="right"
        readonly
        is-link
        @click="show1 = true"
      ></Field>
      <Field
        class="aa"
        required
        label="申请内容、范围及要求"
        input-align="right"
        readonly
      ></Field>
      <textarea
        v-model="textarea"
        placeholder="请简述"
        cols="30"
        rows="10"
      ></textarea>
      <Field
        v-model="type"
        label="项目类型"
        required
        placeholder="请选择项目类型"
        input-align="right"
        readonly
        is-link
        @click="show2 = true"
      ></Field>

      <Field
        v-model="limit"
        label="期望完成期限"
        required
        placeholder="请选择期望完成期限"
        input-align="right"
        readonly
        is-link
        @click="show3 = true"
      ></Field>

      <!-- <Cell title="请拍摄现场照片" />
      <Uploader v-model="fileList" multiple :max-count="2" /> -->
      <Field
        label="请拍摄现场照片"
        required
        label-width="8em"
        readonly
        :border="false"
      />
      <Uploader v-model="fileList" multiple :max-count="3" capture="camera" />

      <Cell>
        <div style="display: flex">
          <Icon name="location" color="#6A6D73" size=".5rem" />
          <p>{{ address }}</p>
        </div>
      </Cell>
    </div>
    <div class="btn-placeholder"></div>
    <div class="btnFa">
      <Button class="btn" @click="toJump">下一步</Button>
    </div>

    <!-- 弹框 -->
    <Popup v-model="show1" position="bottom" :style="{ height: '50%' }">
      <Picker
        title="紧急程度"
        show-toolbar
        :columns="columns1"
        @confirm="onConfirm1"
        @cancel="show1 = false"
        :value-key="'name'"
      ></Picker>
    </Popup>
    <Popup v-model="show2" position="bottom" :style="{ height: '50%' }">
      <Picker
        title="项目类型"
        show-toolbar
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="show2 = false"
        :value-key="'name'"
      ></Picker>
    </Popup>
    <Popup v-model="show3" position="bottom" :style="{ height: '50%' }">
      <!-- <Picker
        title="完成期限"
        show-toolbar
        :columns="columns3"
        @confirm="onConfirm3"
        @cancel="show1 = false"
      ></Picker> -->
      <DatetimePicker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="startConfirm"
        @cancel="showTime1 = false"
        item-height="1rem"
      ></DatetimePicker>
    </Popup>
  </div>
</template>

<script>
// import BaiduMap from "BaiduMap";
import { EquipmentRepairServicePost, scanTheCode } from "../../../api/work";
import Layout from "components/Layout";
import uploadImages from "@/utils/uploadImages1.js";
import getPosition from "@/utils/getPosition";
import {
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  Picker,
  Popup,
  DatetimePicker,
  Toast,
} from "vant";
export default {
  name: "EquipmentRepair",

  components: {
    Uploader,
    NavBar,
    Icon,
    Field,
    Cell,
    Button,
    Picker,
    Popup,
    DatetimePicker,
    Toast,
  },

  directives: {},

  data() {
    return {
      id: "",
      describe: "",
      title: "",
      lng: "120.068788",
      lat: "31.417695",
      name: "",
      phone: "",
      fileList: [],
      lv: "",
      type: "",
      limit: "",
      address: "无锡拈花湾景区",
      textarea: "",
      show1: false,
      show2: false,
      show3: false,
      showTime1: false,
      columns1: [1, 2, 3],
      columns2: [1, 2, 3],
      columns3: [1, 2, 3],
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: "",
    };
  },
  computed: {
    emergency() {
      let arr = this.columns1.filter((v) => v.name == this.lv);
      if (arr.length) return arr[0].id;
      return "";
    },
    itemType() {
      let arr = this.columns2.filter((v) => v.name == this.type);
      if (arr.length) return arr[0].id;
      return "";
    },
    point() {
      return `[${this.lng}, ${this.lat}]`;
    },
  },
  created() {},
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    if (this.$route.query.name) {
      this.name = this.$route.query.name;
    }
    if (this.$route.query.address) {
      this.describe = this.$route.query.address;
    }
    // this.city();
    this.getMuneList1();
    this.getMuneList2();
    // this.scan("EQUIP_1637202801433_8");
  },

  methods: {
    async getMuneList1() {
      console.log(111);
      const { param } = await EquipmentRepairServicePost({
        code: "EquipRepairsManage-emergencyState",
      });
      console.log("menu", param.data);
      this.columns1 = param.data;
    },
    async getMuneList2() {
      console.log(111);
      const { param } = await EquipmentRepairServicePost({
        code: "EquipRepairsManage-itemType",
      });
      console.log("menu", param.data);
      this.columns2 = param.data;
    },
    //扫一扫事件
    toScan() {
      window.acceptParameter = (jsonString) => {
        this.scan(jsonString);
      };
      window.location.href = "luculent:getScanInfo";
    },
    async scan(jsonString) {
      // this.$router.push({
      //   path: "Equipmentselection",
      //   query: {},
      // });
      // return;
      const data = await scanTheCode({
        code: jsonString,
      });
      console.log("data", data);
      if (data.state != 0) {
        this.$router.push({
          path: "Equipmentselection",
          query: {},
        });
      } else {
        this.name = data.param.data.name;
        this.describe = data.param.data.address;
        this.id = data.param.data.no;
      }
    },
    onClickLeft() {},
    onClickRight() {},
    toRecordsList() {
      this.$router.push({
        path: "RecordsList",
        query: {},
      });
    },
    city() {
      getPosition()
        .then((res) => {
          this.address = res.address;
          this.lng = res.lng;
          this.lat = res.lat;
        })
        .catch((err) => {
          console.log(err);
          this.$toast("定位失败！");
        });

      // this.$geolocation.getCurrentPosition(
      //   (position) => {
      //     console.log(position);
      //     const { lat, lng } = position.point;
      //     const { province, city, district, street, street_number } =
      //       position.address;
      //     this.address = province + city + district + street + street_number;
      //     this.lat = lat;
      //     this.lng = lng;
      //   },
      //   (e) => {
      //     console.log(e);
      //     this.$toast("定位失败！");
      //   },
      //   { provider: "baidu" }
      // );
    },
    async toJump() {
      if (this.id.trim().length <= 0) {
        return Toast.fail("请选择设备编号");
      }
      // if (this.describe.trim().length <= 0) {
      //   return Toast.fail("请选择所在位置");
      // }
      if (this.title.trim().length <= 0) {
        return Toast.fail("请输入标题");
      }
      if (this.lv.trim().length <= 0) {
        return Toast.fail("请选择紧急程度");
      }
      if (this.textarea.trim().length <= 0) {
        return Toast.fail("请填写申请内容、范围及要求");
      }
      if (this.type.trim().length <= 0) {
        return Toast.fail("请选择项目类型");
      }
      if (this.limit.trim().length <= 0) {
        return Toast.fail("请选择期望完成期限");
      }
      if (this.fileList.length <= 0) {
        return Toast.fail("请拍摄现场照片");
      }

      let pic = await uploadImages(this.fileList);
      pic = pic.join(",");
      // return console.log(pic);

      let query = {
        equipNo: this.id,
        title: this.title,
        emergency: this.emergency,
        applyNode: this.textarea,
        expectTime: this.limit,
        attachment: pic,
        point: this.point,
        itemType: this.itemType,
      };
      // return console.log(query);
      this.$router.push({
        name: "EquipmentRepair2",
        query,
      });
    },
    onConfirm1(value, index) {
      console.log(value, index);
      this.lv = value.name;
      this.show1 = false;
    },
    onConfirm2(value, index) {
      console.log(value, index);
      this.type = value.name;
      this.show2 = false;
    },
    onConfirm3(value, index) {
      console.log(value, index);
      this.limit = value;
      this.show3 = false;
    },
    startConfirm(value) {
      console.log(value);
      this.limit = this.getTime(value);
      this.show3 = false;
    },
    getTime(time) {
      const year = time.getFullYear();
      const Month = time.getMonth() + 1;
      let Day = time.getDate();
      Day = Day < 10 ? "0" + Day : Day;
      // let hour = time.getHours();
      // hour = hour < 10 ? "0" + hour : hour;
      // let m = time.getMinutes();
      // m = m < 10 ? "0" + m : m;
      return `${year}-${Month}-${Day}`;
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.EquipmentRepair {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  padding: 30px 0;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .main {
    padding-bottom: 20px;
    background-color: #fff;
    .search-icon {
      color: @primary;
    }
    textarea {
      width: 692px;
      height: 157px;
      margin: 10px 0;
      margin-left: 50%;
      padding: 15px;
      transform: translate(-50%);
      border: 1px solid #dddddd;
      font-size: 26px;
      border-radius: 6px;
    }
    /deep/.van-cell__title span {
      color: black;
    }
    .location-box {
      width: 100%;
      display: flex;
      align-items: center;
      div {
        font-size: 28px;
        color: #999999;
      }
    }
    .van-uploader {
      margin: 20px;
    }
    /deep/.van-uploader__upload {
      border: 2px dashed #e16712;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      background: #fff;
      .van-icon {
        color: rgb(225, 103, 18);
        &::before {
          content: "\F0A2";
        }
      }
    }
  }
  .btn-placeholder {
    height: 98px;
  }

  .btnFa {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding-bottom: 10px;
  }
  .btn {
    height: 98px;
    width: 90%;
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
  /deep/.van-icon {
    display: flex;
    align-items: center;
  }

  .aa {
    /deep/ .van-field__label {
      width: 80%;
    }
  }
}
</style>